<html>
<head>
    <meta charset="utf-8">
    <title>全国疫情实时数据</title>
    <!-- 引入 echarts.js -->
<!--   <script src="/echarts.min.js"></script>-->
    <script src="/js/plugins/jquery/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<!--<input type="button" value="myEchars" onclick="show()">-->
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
    $(function () {
        show();
    })
    function show() {
        var myChart = echarts.init(document.getElementById('main'));
        var map0 = ["area"];
        var map1 = ["确诊人数"];
        var map2 = ["死亡人数"];
        var map3 = ["治愈人数"];

        $.ajax({
            url: "/nationalEpidemic/getNationalEpidemic",
            type: "post",
            dataType: "json",
            async: false,
            success : function (result) {
                //console.log(result.data);
                var result = result.data;
                for (var i =0; i < result.length; i++){
                    if(result[i].name == "美国"){
                        map0.push(result[i].name);
                        map1.push(result[i].conNum);
                        map2.push(result[i].deathNum);
                        map3.push(result[i].cureNum);
                    }else if (result[i].name == "日本"){
                        map0.push(result[i].name);
                        map1.push(result[i].conNum);
                        map2.push(result[i].deathNum);
                        map3.push(result[i].cureNum);
                    }else if (result[i].name == "印度"){
                        map0.push(result[i].name);
                        map1.push(result[i].conNum);
                        map2.push(result[i].deathNum);
                        map3.push(result[i].cureNum);
                    }else if (result[i].name == "英国"){
                        map0.push(result[i].name);
                        map1.push(result[i].conNum);
                        map2.push(result[i].deathNum);
                        map3.push(result[i].cureNum);
                    }else if (result[i].name == "意大利"){
                        map0.push(result[i].name);
                        map1.push(result[i].conNum);
                        map2.push(result[i].deathNum);
                        map3.push(result[i].cureNum);
                    }

                }
                // 指定图表的配置项和数据
                myChart.setOption({
                    legend: {},
                    tooltip: {},
                    dataset: {
                        source: [
                            map0,map1,map2,
                            map3
                        ]
                    },
                    xAxis: [
                        {type: 'category', gridIndex: 0},

                    ],
                    yAxis: [
                        {gridIndex: 0},

                    ],
                    grid: [
                        {bottom: '5%'},
                        {top: '60%'}
                    ],
                    series: [
                        // 这几个系列会在第一个直角坐标系中，每个系列对应到 dataset 的每一行。
                        {type: 'bar', seriesLayoutBy: 'row'},
                        {type: 'bar', seriesLayoutBy: 'row'},
                        {type: 'bar', seriesLayoutBy: 'row'}
                    ]
                })
            },
            error: function (result) {
                alert("网络错误，请联系管理员");
            }
        })

    }
</script>
</body>
</html>